<template>
  <TableTemplate :controller="sysPostController" :options="options">
    <template #in-filter>
      <el-button
        type="success"
        size="large"
        :icon="Plus"
        @click="
          sysPostController.handleAdd().then(() => {
            sysPostController.refreshTable(true)
          })
        "
      >
        新增
      </el-button>
      <input type="file" @change="handleFileChange" />
      <button @click="uploadFile">上传文件</button>
    </template>
    <template #slot-operate="{ scope }">
      <el-button
        type="primary"
        link
        @click="
          sysPostController.handleUpdate(scope.row).then(() => {
            sysPostController.refreshTable(false)
          })
        "
        ><img src="/static/icons/edit1.svg" class="mr2" />

        编辑
      </el-button>
      <el-button
        type="primary"
        link
        @click="
          sysPostController.handleDelete(scope.row).then(() => {
            sysPostController.refreshTable(true)
          })
        "
        ><img src="/static/icons/del1.svg" class="mr2" />

        删除
      </el-button>
    </template>
  </TableTemplate>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import FormSysPostController from '@/core/classes/FormSysPostController'
import useUserStore from '@/store/modules/user'
import axios from 'axios'
const userStore = useUserStore()
const sysPostController = new FormSysPostController({
  paged: false,
  defaultKeys: {
    idKey: 'deptId',
  },
})

onMounted(() => {
  userStore.closeProjectChoice()
  sysPostController.refreshTable(true)
})

onBeforeUnmount(() => {
  userStore.openProjectChoice()
})

const options = {
  operate: {
    width: '180',
    rowKey: 'deptId',
  },
}

const selectedFile = ref(null)

// 处理文件选择事件
const handleFileChange = (event) => {
  selectedFile.value = event.target.files[0]
}

// 处理文件上传事件
const uploadFile = async () => {
  try {
    const formData = new FormData()
    formData.append('audio_file', selectedFile.value)

    axios
      .post('http://100.79.252.96:30523/audio/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        params: {
          require_text: '返回说的内容',
        },
        timeout: 5000,
      })
      .then((res) => {
        console.log(res)
      })
      .catch((error) => {
        console.error('Error:', error)
      })
  } catch (error) {
    console.error('File upload failed:', error)
  }
}
</script>

<style lang="scss" scoped></style>
